﻿@inject ProductService ProductService
@inject IProductCategoriesProvider ProductCategoriesProvider

<div class="demo-description mw-1100" id="ColumnTemplate">
    <h2><DemoNavLink Link="GridTemplate#ColumnTemplates" />Data Grid - Column Templates</h2>

    <p>This module illustrates how you can use <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1#templates">column templates</a> to format cell values and specify custom data editors.</p>
    <ul>
        <li>
            <p><b>Availability column</b> - <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn.DisplayTemplate">DisplayTemplate</a> formats cell values using check boxes and colored text. <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn.EditTemplate">EditTemplate</a> embeds a ComboBox control into the edit form.</p>
        </li>
        <li>
            <p><b>Category column</b> - <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn.DisplayTemplate">DisplayTemplate</a> builds a composite string and displays it in plain text. <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn.EditTemplate">EditTemplate</a> embeds another Data Grid to enable lookup functionality.</p>
        </li>
    </ul>
    <p>
        Review how values in the Availability and Category columns are formatted and try the Edit action to see the custom editors integrated into the edit form.
    </p>
</div>

@if (DataSource == null || NestedDataSource == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <DxDataGrid Data="@DataSource"
                RowRemoving="@((dataItem) => OnRowRemoving(dataItem))"
                RowUpdating="@((updatingDataItem, newValues) => OnRowUpdating(updatingDataItem, newValues))"
                RowInserting="@((newValues) => OnRowInserting(newValues))"
                CssClass="mw-1100">

        <DxDataGridCommandColumn Width="150px"></DxDataGridCommandColumn>

        <DxDataGridColumn Field="@nameof(Product.ProductName)" Caption="Product Name">
        </DxDataGridColumn>

        <DxDataGridColumn Field="@nameof(Product.Availability)" Caption="Availability" Width="150px">
            <DisplayTemplate>
                @{
                    var id = Guid.NewGuid().ToString();
                    var inStock = (context as Product).Availability;
                    <DxCheckBox Id="@id" Checked="@inStock" Enabled="false">
                        @if(inStock) {
                        <label class="form-check-label text-success" for="@id"><span>In stock</span></label>
                        } else {
                        <label class="form-check-label text-danger" for="@id"><span>Sold out</span></label>
                        }
                    </DxCheckBox>
                }
            </DisplayTemplate>
            <EditTemplate>
                <DxComboBox Data="@(new List<string>() { "In stock", "Sold out" })"
                            Value="@(((bool)((CellEditContext)context).CellValue) ? "In stock" : "Sold out" )"
                            ValueChanged="@((string newCellValue) => ((CellEditContext)context).OnChanged(newCellValue == "In stock"))">
                </DxComboBox>
            </EditTemplate>
        </DxDataGridColumn>

        <DxDataGridColumn Field="@nameof(Product.ProductCategoryId)" Caption="Category">
            <DisplayTemplate>
                @{
                    var product = context as Product;
                    int currentCellValue = (int)product.ProductCategoryId;
                    var nestedItem = NestedDataSource.Where(x => x.SubcategoryID == currentCellValue).FirstOrDefault();
                    string category = nestedItem != null ? nestedItem.Category.ToString() : "none";
                    string subcategory = nestedItem != null ? nestedItem.Subcategory : "none";
                    <span>@category/@subcategory</span>
                }
            </DisplayTemplate>
            <EditTemplate>
                @{
                    var cellEditContext = (CellEditContext)context;
                    int currentCellValue = (int)cellEditContext.CellValue;
                    var nestedItem = NestedDataSource.Where(x => x.SubcategoryID == currentCellValue).FirstOrDefault();
                }
                <DxDataGrid Data="@NestedDataSource"
                            PageSize="5"
                            SingleSelectedDataRow="@nestedItem"
                            SingleSelectedDataRowChanged="@(newCellValue => cellEditContext.OnChanged(newCellValue.SubcategoryID))">
                    <DxDataGridColumn Field="@nameof(ProductCategory.Category)"></DxDataGridColumn>
                    <DxDataGridColumn Field="@nameof(ProductCategory.Subcategory)"></DxDataGridColumn>
                    <DxDataGridDateEditColumn Field="@nameof(ProductCategory.LastUpdated)" DisplayFormat="D" EditorFormat="d" EditorDisplayFormat="D"></DxDataGridDateEditColumn>
                </DxDataGrid>
            </EditTemplate>
        </DxDataGridColumn>

    </DxDataGrid>

    <CodeSnippet_GridTemplate></CodeSnippet_GridTemplate>
}

@code {
    IEnumerable<Product> DataSource;
    IEnumerable<ProductCategory> NestedDataSource;

    protected override async Task OnInitializedAsync()
    {
        DataSource = await ProductService.LoadAsync();
        NestedDataSource = await ProductCategoriesProvider.GetProductCategoriesAsync();
    }

    void OnRowRemoving(Product dataItem)
    {
        ProductService.RemoveAsync(dataItem);
    }
    void OnRowUpdating(Product dataItem, Dictionary<string, object> newValue)
    {
        ProductService.UpdateAsync(dataItem, newValue);
    }
    void OnRowInserting(Dictionary<string, object> newValue)
    {
        ProductService.InsertAsync(newValue);
    }
}
